<template>
  <view style="height: 250rpx;"></view>
  <view style="display: flex; flex-direction: row; justify-content: space-around ;padding-left: 20rpx;padding-right: 20rpx;">
    <text style="display: flex;flex-direction: row;background-color:red; font-size: 10px;margin-left: 30px;">10.00kg</text>
    <text style="display: flex;flex-direction: row;background-color:green; font-size: 10px; ">10.00kg</text>
    <text style="display: flex;flex-direction: row;background-color:yellow; font-size: 10px;">10.00kg</text>

  </view>
  <view style="display: flex; flex-direction: row;padding-left: 20rpx;padding-right: 20rpx;" >
    <view style="display: flex; flex-direction: column;background-color: yellow;flex: 1;" v-if="pd">
      <view style="background-color: rgb(96, 96, 255);  height: 10rpx;border-radius: 150px;"></view>
      <text style="margin: auto;margin-top: 30rpx;">test</text>
    </view>
    <view style="display: flex; flex-direction: column;background-color: yellow;flex: 1;" v-if="bz">
      <view style="background-color: rgb(105, 183, 183);  height: 10rpx;border-radius: 150px;" ></view>
      <text style="margin: auto; margin-top: 30rpx;">test</text>
    </view>
    <view style="display: flex; flex-direction: column;background-color: yellow;flex: 1;" v-if="yx">
      <view style="background-color: rgb(9, 238, 162); height: 10rpx;border-radius: 150px;"></view>
      <text style="margin: auto;margin-top: 30rpx;">test</text>
    </view>
    <view style="display: flex; flex-direction: column;background-color: yellow;flex: 1;" v-if="pg">
      <view style="background-color: rgb(253, 195, 4); height: 10rpx;border-radius: 150px;"></view>
      <text style="margin: auto;margin-top: 30rpx;">test</text>
    </view>
    <view style="display: flex; flex-direction: column;background-color: yellow;flex: 1;" v-if="gg">
      <view style="background-color: rgb(255, 3, 3); height: 10rpx;border-radius: 150px;" ></view>
      <text style="margin: auto;margin-top: 30rpx;">test</text>
    </view>
  </view>
</template>
  
  <!-- setup:vue3.2语法 lang=ts：使用ts开发逻辑 -->
<script setup lang="ts">
import { ref } from 'vue';

const pd = ref(true);
const bz = ref(true);
const yx = ref(true);
const pg = ref(true);
const gg = ref(false);

</script>
  
<style></style>
  